<template>
	<div id="player">
		
		<!--<button>上一首</button>-->
		<div class="songPic cf" v-for="s in songs" :class="{playSong:flag}">
			<img :src="s.al.picUrl"/>
		</div>
		<div class="playName" v-for="s in songs">
			<p class="songName">{{s.name}}</p>
			<p class="singName"  v-for="(a,i) in s.ar">{{a.name}}
				<span v-if="!(i == s.ar.length-1) ">/</span> 
			</p>
		</div>
		
		<button class="playBtn cf" @click="playOrPause"><i class="iconfont" :class="[flag ? 'icon-zanting' : 'icon-bofang']"></i></button>
		<!--<button @click="nextSong()">下一首</button>-->
	</div>
</template>

<script>
	import axios from 'axios';
	
	export default{
		data(){
			return {
				flag:false,
				id:"",
				detail:"",
				songs:"",
				player2:{}
			}	
		},
		computed:{
			//计算属性：依赖数据发生改变时，就会重新计算(触发事件)
			song:function(){
				return this.$store.state.msg
			}
		},
		created(){
			this.player2=document.getElementById("au");
		},
		methods:{
			getSong(){
				//在vuex中取值
				var id=this.$store.state.msg;
				console.log("ccc",id);
				axios.get("https://netease.bluej.cn/music/url?timestamp=13&id="+id).then((res)=>{
					console.log(this);
					this.detail = res.data.data;
					//给audio标签设置src
					this.player2.src="https://music.163.com/song/media/outer/url?id= ";
					this.player2.src += id+".mp3"
					this.player2.play();
					this.flag=true;
					console.log("detail",this.detail);
				});
				//获取歌曲详情    /song/detail?ids=347238
				axios.get("https://netease.bluej.cn/song/detail?timestamp=13&ids="+id).then((res)=>{
					this.songs = res.data.songs;
					console.log("歌曲详情",this.songs)
				})
				
			},
				
			
			playOrPause(){
				//vuex中状态决定播放还是暂停
				if(this.$store.state.playState==true){
					//暂停
					this.player2.pause();
					this.flag=false;
					this.$store.commit("change",{
						playState:false
					})
				}else{
					//播放
					this.player2.play();
					this.flag=true;
					this.$store.commit("change",{
						playState:true
					})
				}
			}
		}
		
	}
</script>

<style lang="scss">
	#player{
		position:fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background:black;
		height: 60px;
		font-size: 30px;
		i{
			color: white;
		}
		.playBtn{
			margin-top: 12.5px;
			margin-right: 20px;
			width: 35px; 
			height:35px;
			border-radius: 50%;
			background: #D43C33;
			border: none;
			outline: none;
			float: right;
			.bf{
				display: none;
			}
		}
		.playName{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 80px;
			.songName{
			font-size: 15px;
			color: #DEDEDE;
			text-align: left;
			}
			.singName{
				float: left;
				color:#D43C33;
				text-align: left;
				font-size: 12px;
			}
		}
		
		.songPic{
			width:40px;
			height: 40px;
			display: inline-block;
			float: left;
			border-radius: 50%;
			overflow: hidden;
			margin-top: 10px;
			margin-left: 20px;
			img{
				width: 100%;
				height: 100%;
			}
			
		}
		.playSong{
			animation: playSong 4s linear infinite;
		}
	}
	
	
	@keyframes playSong{
		from{}
		to{transform: rotate(360deg);}
	}
	
</style>